<template>
  <div class="map_btn_page">
    <div
      v-for="(i, index) in jingQu"
      :key="i.id"
      class="map_btn_item"
      :class="{ isActive: index === isIndex }"
      @click="clickMapBtn(index)"
    >
      <p>景点{{ index + 1 }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "mapPage",
  props: {
    jingQu: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      isIndex: -1,
    };
  },
  methods: {
    clickMapBtn(index) {
      if (this.isIndex === index) return;
      this.isIndex = index;
      this.$emit("clickMapBtn", index);
    },
  },
  mounted() {},
  created() {},
  destroyed() {
    document.body.style.fontSize = "12px";
  },
};
</script>

<style lang="scss" scoped>
@import "@/utils/px2vwvh.scss";

.map_btn_page {
  width: 100%;
  height: 100%;
  .map_btn_item {
    text-align: center;
    width: 100%;
    @include px2vh(height, 50);
    @include px2vh(line-height, 50);
    cursor: pointer;
    background-image: url("~@/assets/images/newImg/map_btn_1.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
}

.isActive {
  background-image: url("~@/assets/images/newImg/map_btn_2.png") !important;
}
</style>
